import { Dropdown, Button, Menu } from 'antd';
import { useSelector } from 'react-redux';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchRolePermissions } from '../../store/modules/userStore';

const PermissionDropdown = () => {

    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(fetchRolePermissions())
    }, [dispatch])

    const rolePermissions = useSelector(state => state.role.rolePermissions) || [];
    const permissions = useSelector(state => state.role.rolePermissions.permissions) || [];

    console.log('rolePermissions:', rolePermissions)
    console.log('permissions', permissions)
    // console.log('rolePermissions.role:',rolePermissions.role)
    // console.log('rolePermissions.permissions:------:',rolePermissions.permissions)

    // const rolePermissions = {
    //     admin: ['delete', 'edit', 'view'],
    //     editor: ['edit', 'view'],
    //     guest: ['view']
    // };


    // const permissions1 = ['delete', 'edit', 'view'];


    const dropdownOptions = [
        { label: '查看', value: 'view', permission: 'view' },
        { label: '编辑', value: 'edit', permission: 'edit' },
        { label: '删除', value: 'delete', permission: 'delete', danger: true }
    ];

    const filteredOptions = dropdownOptions.filter(option => 
        permissions.includes(option.permission)
    );
    console.log('filteredOptions:', filteredOptions)

    const menu = (
        <Menu
            items={filteredOptions.map(item => ({
                key: item.value,
                label: item.label,
                danger: item.danger,
            }))}
        //onClick={({ key }) => handleAction(key)}
        />
    );

    return (
        <Dropdown overlay={menu}>
            <Button type="primary">
                操作
            </Button>
        </Dropdown>
    );
};

export default PermissionDropdown